<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        .datalist {
			border: 1px solid #ccc;
			border-collapse: collapse;
			width: 100%;
		}

		.datalist thead tr {
			background-color: #dfdfdf;
		}

		td,
		th {
			border: 1px solid #ccc;
			padding: 5px 10px;
		}

		.odd {
			background-color: #efefef;
		}

		.selected {
			background-color: #fc0;
			color: #fff;
		}
    </style>
</head>
<body>
    <button>第1行</button>
	<button>最后1行</button>
	<button>前3行</button>
	<button>后3行</button>
	<button>第4-6行</button>
	<button>第8行</button>
	<input type="text" id="username"><button id="btn">查找</button>
	<button id="btnFx">反选</button>
	<table class="datalist">
		<thead>
			<tr>
				<th width="20"><input type="checkbox" id="all"></th>
				<th>姓名</th>
				<th>昵称</th>
				<th>性别</th>
				<th>爱好</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox"></td>
				<td>刘备</td>
				<td>小刘</td>
				<td>男</td>
				<td>撩妹，装逼，编草鞋</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>关羽</td>
				<td>关二</td>
				<td>男</td>
				<td>耍大刀，变脸，喝酒</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张飞</td>
				<td>张三</td>
				<td>男</td>
				<td>打架，喝酒，耍流氓</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>赵云</td>
				<td>赵四</td>
				<td>男</td>
				<td>打架，喝酒，耍帅</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>貂蝉</td>
				<td>美女</td>
				<td>女</td>
				<td>撩汉，化妆</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>小乔</td>
				<td>乔二</td>
				<td>女</td>
				<td>弹琴，唱歌，撩周瑜</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>小乔</td>
				<td>乔二</td>
				<td>女</td>
				<td>弹琴，唱歌，撩周瑜</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>小乔</td>
				<td>乔二</td>
				<td>女</td>
				<td>弹琴，唱歌，撩周瑜</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>小乔</td>
				<td>乔二</td>
				<td>女</td>
				<td>弹琴，唱歌，撩周瑜</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>小乔</td>
				<td>乔二</td>
				<td>女</td>
				<td>弹琴，唱歌，撩周瑜</td>
			</tr>
		</tbody>
	</table>


    <script>
        $(function(){
            // 第一行
            $("button").eq(0).on("click",function(){
                $(".datalist tbody :first").addClass("selected").siblings().removeClass("selected")
            })

            // 最后一行
            $("button").eq(1).on("click",function(){
                $(".datalist tbody tr").last().addClass("selected").siblings().removeClass("selected")
            })

            // 前三行
            $("button").eq(2).on("click",function(){
                $(".datalist tbody tr").removeClass("selected").slice(0,3).addClass("selected")
            })

            // 后三行
            $("button").eq(3).on("click",function(){
                var len=$(".datalist tbody tr").length
                $(".datalist tbody tr").removeClass("selected").slice(len-3,len).addClass("selected")
            })

            // 第4-6行
            $("button").eq(4).on("click",function(){
                $(".datalist tbody tr").removeClass("selected").slice(3,6).addClass("selected")
            })

            // 第8行
            $("button").eq(5).on("click",function(){
                $(".datalist tbody tr").removeClass("selected").eq(7).addClass("selected")
            })

            // 查找
            $("#btn").on("click",function(){
                let txt=$("#username").val()
                if(txt==''){
                    return;
                }
                $(".datalist tbody tr").removeClass("selected");
                $(".datalist tbody tr:contains("+ txt +")").addClass("selected");
            })

            // 全选
            $(".datalist thead #all").on("click",function(){
                $(".datalist tbody tr :checkbox").prop("checked",$(this).prop("checked"))
            })
            $(".datalist tbody tr :checkbox").on("click",function(){
                var count1=$(".datalist tbody tr :checkbox").length
                var count2=$(".datalist tbody tr :checkbox:checked").length
                $(".datalist thead #all").prop("checked",count1==count2)
            })
            // 反选
            $("#btnFx").on("click",function(){
                $(".datalist tbody tr :checkbox").each(function(index,item){
                    $(item).prop("checked",!$(item).prop("checked"))
                })
            })
        })
    </script>
</body>
</html>